<template>
  <div>
    <el-row type="flex" justify="space-between" align="middle" style="width: 100%">
      <el-col>
        <strong v-if="isRoot">{{ treeNode.name }}</strong>
        <span v-else>{{ treeNode.name }}</span>
      </el-col>
      <el-col :span="4">
        <el-row type="flex" justify="end">
          <el-col>
            <span>{{ treeNode.manager }}</span>
          </el-col>
          <el-col>
            <!-- 下拉菜单套上一层带@click.stop的div阻止事件冒泡 -->
            <div @click.stop>
              <!-- 下拉菜单 element -->
              <el-dropdown @command="handleCommand">
                <span>
                  操作<i class="el-icon-arrow-down" />
                </span>
                <!-- 下拉菜单 -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="addDept">添加子部门</el-dropdown-item>
                  <el-dropdown-item v-if="!isRoot" command="editDept">编辑部门</el-dropdown-item>
                  <el-dropdown-item v-if="!isRoot" command="delDept">删除部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { delDepartments } from '@/api/departments'
export default {
  props: {
    treeNode: {
      type: Object, // 对象类型
      required: true // 要求对方使用您的组件的时候 必须传treeNode属性 如果不传 就会报错
    },
    isRoot: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleCommand(type) {
      this[type]()
    },
    addDept() {
      console.log('添加子部门的操作')
      // 告诉父组件 显示弹层
      this.$emit('addDepts', this.treeNode) // 为何传出treeNode 因为是添加子部门 需要当前部门的数据
    },
    editDept() {
      console.log('编辑部门的操作')
      this.$emit('editDepts', this.treeNode)
    },
    async delDept() {
      try {
        console.log('删除操作')
        await this.$confirm('要删除吗')
        await delDepartments(this.treeNode.id)
        this.$message.success('删除成功')
        // 通知父组件更新
        this.$emit('delDepts')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
